<template>
    <div class="map">
        <!-- 给地图加点击事件getLocationPoint，点击地图获取位置相关的信息，经纬度啥的 -->
        <!-- scroll-wheel-zoom：是否可以用鼠标滚轮控制地图缩放，zoom是视图比例 -->
        <baidu-map
                class="bmView"
                :scroll-wheel-zoom="true"
                :zoom="zoom"
                center="沈阳"
                @click="getLocationPoint"
                ak="YOUR_APP_KEY"
        >
            <bm-view style="width: 100%; height:300px; flex: 1"></bm-view>
            <van-search v-model="addressKeyword" placeholder="请输入搜索地点" />
            <bm-local-search :keyword="addressKeyword"
                             @markersset="markerssetAction"
                             @infohtmlset="infohtmlsetAction"
                             @searchcomplete="searchcompleteAction"
                             :auto-viewport="true"
                             :pageCapacity="10"
                             :forceLocal="true"
                             :panel="false"
                             :location="locationName"></bm-local-search>
        </baidu-map>
        <div class="search-result">
            <div class="search-item" v-for="(item, index) in searchList" :key="index">
                <div class="left">
                    <div class="title">{{ item.title }}</div>
                    <div class="address">{{ item.address }}</div>
                </div>
                <div class="right">
                    <van-button type="primary" class="btn" size="mini" @click="selectMapAction(item)">选择</van-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      location: {
        lng: 116.404,
        lat: 39.915
      },
      zoom: 12,
      addressKeyword: '',
      locationName: '沈阳',
      searchList: []
    }
  },
  methods: {
    getLocationPoint (e) {
      this.lng = e.point.lng
      this.lat = e.point.lat
      /* 创建地址解析器的实例 */
      let geoCoder = new BMap.Geocoder()
      /* 获取位置对应的坐标 */
      geoCoder.getPoint(this.addressKeyword, point => {
        this.selectedLng = point.lng
        this.selectedLat = point.lat
      })
      /* 利用坐标获取地址的详细信息 */
      geoCoder.getLocation(e.point, res => {
        console.log(res)
      })
    },
    markerssetAction (data) {
      console.log(data)
    },
    infohtmlsetAction (data) {
      console.log(data, 'infohtmlsetAction')
    },
    searchcompleteAction (data) {
      if (data && data.Br.length > 0) {
        this.searchList = data.Br
      } else {
        this.searchList = []
      }
    },
    selectMapAction (data) {
      console.log(data, 'info')
    }
  }
}
</script>

<style scoped lang="less">
    .map {
        background-color: white;
        height: 100%;
    }
    .search-result{
        overflow: scroll;
    }

    .search-item {
        border-bottom: 1px solid #9d9d9d;
        padding: 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
            width: 80%;

            .title {
                font-weight: bold;
            }

            .address {
                font-size: 12px;
            }
        }

        .right {
            width: 20%;
        }
    }
</style>
